<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>课程-成绩首页</title>

<%@ include file="/common/commonLib.jsp"%>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/courseScoreIndex.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
<link rel=stylesheet href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="<c:url value='/js/course-index.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<c:url value='/js/taskCreat.js'/>" type="text/javascript" charset="utf-8"></script>
	<script src="../js/echarts.js"></script>
	<style>
		#main3 {
			width: 100%;
			height: 100vh;
			position: relative;
		}

		#stuTitle {
			position: absolute;
			top: 50px;
			lett: 50px;
			width: 100vw;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin: 0 -40px;
			padding: 0;
			font-size: 25px;
			font-weight: 900;
		}

		.content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border: 1px solid black;
			border-radius: 10px;
			padding: 20px;
		}
		#main2{
			position: relative;
		}
		#main1{
			position: relative;
		}
	</style>
</head>
<body>

	<div class="container-fluid main">
		<div class="row">
			<div class="col-md-12">
				<%@include file="/common/header.jsp"%>
			</div>
			<div class="col-md-12">
				<%@include file="common/courseHeader.jsp"%>
			</div>
			<div class="col-md-3">
				<%@include file="common/courseLeft.jsp"%>
			</div>
			<div class="col-md-9">
				<%@include file="common/courseNavbar.jsp"%>
			</div>
			<div class="col-md-9">
				<!-- 成绩首页 -->
				<div class="score-index">
					<div class="row row-self">
						<div class="col-md-4">
							<div class="score-title">
								<h4>成绩列表</h4>
							</div>
						</div>
						<div class="col-md-4"></div>
						<div class="col-md-4"></div>
					</div>
					<div class="row row-self">
						<div class="col-md-4"></div>
						<div class="col-md-4">
						</div>
						<div class="col-md-4" style="text-align:right;">
							<div class="row">
								<div class="col-md-4">
									<input title="选择授课大班，生成Excel成绩单" type="button" id="build-score-excel-btn" class="btn btn-self btn-warning" value="导出成绩" style="box-shadow: 3px 3px 3px #e8c797;">
								</div>
								<div class="col-md-4">
									<input title="设置成绩占比，选择计入总成绩的任务" type="button" id="toCreateGrade" class="btn btn-self btn-success test" value="生成成绩" style="box-shadow: 3px 3px 3px #6ba26b;">
								</div>
								<div class="col-md-4">
									<input title="编辑和保存所有学生的成绩" type="button" id="add-change-input" class="btn btn-self btn-info" value="修改成绩" style="box-shadow: 3px 3px 3px #70b4c7;">
								</div>
							</div>
						</div>
						<!-- <div class="col-md-1"></div> -->
					</div>
					<!-- 成绩列表 -->
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-12">
									<table class="table">
										<thead>
											<tr>
												<th rowspan="1"></th>
												<th style="width: 140px">
													<select class="form-control form-control-self" onchange="search()" id="searchBelongClass">
														<option selected = "selected" value="ALL">全部-课程班</option>
					
													</select>
												</th>
												<th style="width: 110px">
													<select class="form-control form-control-self" onchange="search()" id="searchClass">
														<option selected = "selected" value="ALL">全部-班</option>
													</select>
												</th>
												<th style="width: 120px;line-height: 35px;font-size:15px ">学号</th>
												<th style="width: 60px;line-height: 35px;font-size:15px ">姓名</th>
												<th style="width: 120px;line-height: 35px;font-size:15px ">修改日期</th>
												<th style="width: 95px">
													<select class="form-control form-control-self" onchange="search()" id="taskLevel">
														<option value="ALL" selected = "selected">任务</option>
														<option value="LOWLEVEL">&lt;60</option>
														<option value="HIGNLEVEL">&gt;=60</option>
													</select>
												</th>
												<th style="width: 95px">
													<select class="form-control form-control-self" onchange="search()" id="dailyLevel">
														<option value="ALL" selected = "selected">平时</option>
														<option value="LOWLEVEL">&lt;60</option>
														<option value="HIGNLEVEL">&gt;=60</option>
													</select>
												</th>
												<th style="width: 95px">
													<select class="form-control form-control-self" onchange="search()" id="theoryTestLevel">
														<option value="ALL" selected = "selected">理论</option>
														<option value="LOWLEVEL">&lt;60</option>
														<option value="HIGNLEVEL">&gt;=60</option>
													</select>
												</th>
												<th style="width: 95px">
													<select class="form-control form-control-self" onchange="search()" id="labTestLevel">
														<option value="ALL" selected = "selected">实验</option>
														<option value="LOWLEVEL">&lt;60</option>
														<option value="HIGNLEVEL">&gt;=60</option>
													</select>
												</th>
												<th style="width: 115px">
													<select class="form-control form-control-self" onchange="search()"  id="totalLevel">
														<option value="ALL" selected = "selected">总成绩</option>
														<option value="LOWLEVEL">&lt;60</option>
														<option value="HIGNLEVEL">&gt;=60</option>
													</select>
												</th>
												<th style="width: 90px;line-height: 35px;font-size:15px ">操作</th>
											</tr>
										</thead>
										<tbody id="scoreList">
											
										</tbody>
									</table>
									<div style="height: 50px"></div>
								</div>
							</div>
						</div>
						<!-- <div class="col-md-1"></div> -->
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<%@include file="/common/footer.jsp"%>
	<!-- 生成Excel -->
	<div class="modal fade" id="build-excel-file-layer">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title" style="display:inline;float:left;">导出成绩</h2>
					<button type="button" class="close" data-dismiss="modal" style="display:inline;float:right;">&times;</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-xs-12">
							<div class="build-excel-layer-title">
								<span style="white-space:pre;">  </span><span class="detail-title">导出Excel成绩单</span>  
							</div>
						</div>
						<div class="col-xs-12">
							<div class="form-group">
								<div class="row">
									<div class="col-xs-2">
										<label for="">选择大班</label>
									</div>
									<div class="col-xs-8">
										<select class="form-control" id="selectClassList">
											
										</select>
									</div>
									<div class="col-xs-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer" style="text-align:center;">
					<button type="button" id="buildExcelFileBtn" class="btn btn-primary" onclick="buildExcel()">生成Excel</button>
				</div>
			</div>
		</div>
	</div>
	<div id="scoreCharts" style="display: none">
		<div id="main3">
			<%--		${stuName}--%>
			<div id="stuTitle">课程目标分析</div>
			<div class="content">
				<div id="main1" style="width: 600px;height:400px;"></div>
				<div id="main2" style="width: 600px;height:400px;"></div>
			</div>
		</div>
	</div>

</body>
<script>
var data=${data};
var dataNow = data;
var CourseId=data.data.courseId;
$(document).ready(function(){
	if (data.status != "success"){
		alert(data.message);
		return;
	}
	$("#grade").css("color","#00b43c");
	changeUrl(data.data.courseId);
	fetchCourse(data.data.courseId);
	initBelongClass(data.data.classes);
	initClassList(data.data.classes);
	initClassNumber(data.data.classNumbers);
	initTable(data.data);	
	$("#toCreateGrade").click(function(){
		window.location.href="<c:url value='/gradeView/courseRate?courseId="+data.data.courseId+"'/>";
	});
});
var initBelongClass =function(list){
	var searchBelongClass=$("#searchBelongClass");
	for(var i=0;i<list.length;i++){
		searchBelongClass.append("<option value=\""+list[i].id+"\">"+list[i].name+"</option>");
	}
}
var initClassList =function(list){
	var classList=$("#selectClassList");
	for(var i=0;i<list.length;i++){
		classList.append("<option value=\""+list[i].id+"\">"+list[i].name+"</option>");
	}
}

var initClassNumber = function(list){
	var searchClass=$("#searchClass");
	for(var i=0;i<list.length;i++){
		searchClass.append("<option value=\""+list[i]+"\">"+list[i]+"</option>");
	}
}

var initTable = function(data){
	var scoreList=$("#scoreList");
	scoreList.empty();
	var list=data.list;
	if(list.length <= 0){
		var s = "<tr><td colspan=\"12\">暂无成绩记录</td></tr>";
		scoreList.append(s);
	}else{
		for(var i=0;i<list.length;i++){
			var item=list[i];

			var s ="<tr id=\"table-tr\" >";
			s+="<td id=\"show-detail-td\"><i id=\"show-detail-btn-"+(i)+"\" class=\"fa fa-chevron-right\" style=\"font-size: 1.6rem;\"></i></td>";
			s+="<td title=\""+item.className+"\">"+item.className+"</td>";
			s+="<td title=\""+item.classNumber+"\">"+item.classNumber+"</td>";
			s+="<td onclick=\"javascript:TdOnClick(&quot;"+item.studentCode+"&quot;)\" title=\""+item.studentCode+"\" style=\"color:red\">"+item.studentCode+"</td>";
			s+="<td title=\""+item.name+"\">"+item.name+"</td>";
			s+="<td title=\""+item.updateDate+"\">"+item.updateDate+"</td>";
			s+="<td title=\"任务成绩\">";
				s+="<input type='hidden' id=\"id-"+(i)+"\" value='"+item.id+"' name='csId' />";
				s+="<div class=\"control-group\">";														
				s+="<div class=\"controls\">";	
				s+="<input id=\"input-task-score-"+(i)+"\" name=\"taskScore\" type=\"text\" value=\""+item.taskTotalGrade+"\" disabled=\"disabled\"/>";		
				s+="</div>";												
				s+="</div>";
			s+="</td>";
			s+="<td title=\"平时成绩(默认为课堂提问的平均成绩)\">";
				s+="<div class=\"control-group\">";														
				s+="<div class=\"controls\">";	
				s+="<input id=\"input-usual-score-"+(i)+"\" name=\"dailyScore\" type=\"text\" value=\""+item.dailyGrade+"\" disabled=\"disabled\"/>";		
				s+="</div>";												
				s+="</div>";
			s+="</td>";
			
			s+="<td title=\"理论考试成绩\">";
				s+="<div class=\"control-group\">";														
				s+="<div class=\"controls\">";	
				s+="<input id=\"input-theory-score-"+(i)+"\" name=\"theoryScore\" type=\"text\" value=\""+item.theoryTestGrade+"\" disabled=\"disabled\"/>";		
				s+="</div>";												
				s+="</div>";
			s+="</td>";
		
			s+="<td title=\"实验考试成绩\">";
				s+="<div class=\"control-group\">";														
				s+="<div class=\"controls\">";	
				s+="<input id=\"input-experiment-score-"+(i)+"\" name=\"labScore\" type=\"text\" value=\""+item.labTestGrade+"\" disabled=\"disabled\"/>";		
				s+="</div>";												
				s+="</div>";
			s+="</td>";

			s+="<td title=\"总成绩\">";
				s+="<div class=\"control-group\">";														
				s+="<div class=\"controls\">";	
				s+="<input id=\"total-score\" name=\"totalScore\" type=\"text\" value=\""+item.finalTotalGrade+"\" readonly=\"readonly\"/>";		
				s+="</div>";												
				s+="</div>";
			s+="</td>";
			
			s+="<td title=\"修改该学生的成绩\"><input id=\"edit-btn-"+(i)+"\" class=\"btn btn-self btn-success\" style=\"text-align: center; width:50px\" type=\"button\" value=\"编辑\"/></td>";
		
			s+="</tr>";
			
			//隐藏行的代码-start
			s+="<tr id=\"detail-list-"+(i)+"\" style=\"border-bottom: 1px solid #ddd;display:none;\">";
			s+="<td></td>";
			s+="<td colspan=\"11\">";
			s+="<div class=\"row\">";
			s+="<div class=\"col-md-12 nested-table\">";
			
			s+="<div class=\"row\">";
			s+="<div class=\"col-md-12\">";
			
			s+="<table>";
			
			s+="<thead>";
			s+="<tr>";
			
			s+="<th>";
			//需修改onchange=
			s+="<select class=\"form-control form-control-self\" onchange=\"searchTaskScoreLog("+i+")\" id=\"searchTaskByType"+i+"\">";
			s+="<option selected = \"selected\" value=\"ALL\">全部</option>";
			s+="<option value=\"TESTINLESSON\">当堂测试</option>";
			s+="<option value=\"HOMEWORK\">课后作业</option>";
			s+="<option value=\"LABTEST\">实验任务</option>";
			s+="</select>";		
			s+="</th>";		
			s+="<th>题目</th>";
			s+="<th>批改时间</th>";
			s+="<th>得分</th>";
			
			s+="</tr>";		
			s+="</thead>";
			//折叠的详细成绩信息
			s+="<tbody id=\"task-list"+(i)+"\">";		
			s+="</tbody>";
			
			s+="</table>";
			s+="</div>";
			//分页

			s+="</div>";
			
			s+="</div>";
			s+="</div>";
			s+="</div>";
			s+="</td>";
			s+="</tr>";
			
			scoreList.append(s);
		}
	}
}
function TdOnClick(studentCode)
{
	console.log(studentCode)
	console.log(data)
	let id;
	let list = data.data.list;
	for(let i=0;i<list.length;i++){
		if(list[i].studentCode === studentCode){
			id = list[i].stuId;
			break;
		}
	}

	$.get(CONTEXT_PATH+"visualize?courseID="+data.data.courseId+'&stuID='+id,function (data) {
	}).then(function (data) {
		console.log(data)

		var myChart1 = echarts.init(document.getElementById('main1'));
		var myChart2 = echarts.init(document.getElementById('main2'));

		console.log(data.targetNames);
		let targetControl = data.targetControl;
		let targetNames = data.targetNames;
		let arr = [];
		arr.push(['score',  'target']);
		for(let i=0;i<targetControl.length;i++){
			let newArr = [];
			newArr.push(targetControl[i]*100);
			newArr.push(targetNames[i]);
			arr.push(newArr);
		}

		console.log(arr)
		var option1 = {
			dataset: {
				source:arr
			},
			toolbox: {
				feature: {
					// dataView: {show: true, readOnly: true},
					magicType: {show: true, type: ['line', 'bar']},
					restore: {show: true},
					saveAsImage: {show: true}
				},
			},
			title: {
				text: '课程目标掌握程度',
				left: 'center'
			},
			grid: {containLabel: true},
			xAxis: {name: 'score'},
			yAxis: {type: 'category'},
			visualMap: {
				orient: 'horizontal',
				left: 'center',
				min: 0,
				max: 100,
				text: ['高分', '低分'],
				// Map the score column to color
				dimension: 0,
				inRange: {
					color: ['#FD665F',  '#91cc75']
				}
			},
			series: [
				{
					type: 'bar',
					encode: {
						// Map the "amount" column to X axis.
						x: 'score',
						// Map the "product" column to Y axis
						y: 'target'
					},
					name: '课程目标掌握程度'
				}
			]
		};

		var option2 = {
			toolbox: {
				feature: {
					dataView: {show: true, readOnly: true},
					saveAsImage: {show: true}
				}
			},
			color : [ '#5470c6',  '#fac858', '#ee6666', '#73c0de','#3ba272', '#fc8452', '#9a60b4','#91cc75', '#ea7ccc'],
			title: {
				text: '课程目标占比',
				left: 'center'
			},
			series: [
				{
					name: '课程目标占比',
					type: 'pie',    // 设置图表类型为饼图
					radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
					data: data.pieChart // 数据数组，name 为数据项名称，value 为数据项值

				}
			]
		}

		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option1);
		myChart2.setOption(option2);

		if(isNaN(data.pieChart[0].value)){
			layer.alert('暂时无数据分析~请等待老师安排噢')
		}else{
			layer.open({
				type: 1,
				title: data.stuName+'的课程目标分析',
				fixed: false, //不固定
				maxmin: true,
				closeBtn: 1,
				skin: 'layui-layer-molv',
				area: ['90vw', '90vh'],
				offset: '0px',
				content: $("#scoreCharts"),

			});
		}

	})
    // window.location.href = CONTEXT_PATH+"visualize?courseID="+data.data.courseId+'&stuID='+id
}

var search = function(){
	var json={};
	json.courseId=data.data.courseId;
	var classId=$("#searchBelongClass  option:selected").val();
	if(classId!="ALL"){
		json.classId=classId;
	};
	var classNumber=$("#searchClass  option:selected").val();
	if(classNumber!="ALL"){
		json.classNumber=classNumber;
	};
	var taskLevel=$("#taskLevel  option:selected").val();
	if(taskLevel!="ALL"){
		json.taskLevel=taskLevel;
	};
	var theoryTestLevel=$("#theoryTestLevel  option:selected").val();
	if(theoryTestLevel!="ALL"){
		json.theoryTestLevel=theoryTestLevel;
	};
	var labTestLevel=$("#labTestLevel  option:selected").val();
	if(labTestLevel!="ALL"){
		json.labTestLevel=labTestLevel;
	};
	var dailyLevel=$("#dailyLevel  option:selected").val();
	if(dailyLevel!="ALL"){
		json.dailyLevel=dailyLevel;
	};
	var totalLevel=$("#totalLevel  option:selected").val();
	if(totalLevel!="ALL"){
		json.totalLevel=totalLevel;
	};
	
	$.get(CONTEXT_PATH+"studentGradeView/ajaxListData", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			initTable(data.data);
			dataNow = data;
		}else{
			alert(data.message);
		}
	});
}

var isLegal = function(i){
	var re = /^(\d{1,2}(\.\d+)?|100)$/;
	if(i > 100 || i < 0 || !re.test(i)){
		return false;
	}else{
		return true;
	}
}

var updateGrade = function(i){
	
	var id=$("#id-"+(i)).val();
	var taskScore=$("#input-task-score-"+(i)).val();
	var dailyScore=$("#input-usual-score-"+(i)).val();
	var theoryScore=$("#input-theory-score-"+(i)).val();
	var labScore=$("#input-experiment-score-"+(i)).val();
	if(isEmpty(id)){
		alert("参数有误");
		return ;
	}

	if(!isLegal(taskScore)){
		layer.msg("任务成绩设置错误！请填写0~100的数值");
	}else if(!isLegal(dailyScore)){
		layer.msg("平时成绩设置错误！请填写0~100的数值");
	}else if(!isLegal(theoryScore)){
		layer.msg("理论考试成绩设置错误！请填写0~100的数值");
	}else if(!isLegal(labScore)){
		layer.msg("实验考试成绩设置错误!请填写0~100的数值");
	}else{
		var json={
			id:id,
			theoryTestGrade:theoryScore,
			labTestGrade:labScore,
			dailyGrade:dailyScore,
			taskTotalGrade:taskScore
		};
		$.post(CONTEXT_PATH+"gradeView/updateGrade", {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				window.location.reload();
			}else{
				alert(data.message);
			}
		});
	}	
}

var listIsLegal = function(list){
	
	var flag = true;
	for(var i=0;i<list.length;i++){
		if(!isLegal(list[i].value)){
			flag=false;
		}
	}
	return flag;
}

var batchUpdateGrade = function(){
	var csId = $("input[name='csId']");
	var taskScore=$("input[name='taskScore']");
	var dailyScore=$("input[name='dailyScore']");
	var theoryScore=$("input[name='theoryScore']");
	var labScore = $("input[name='labScore']");

	var items=[];
	if(!listIsLegal(taskScore)||!listIsLegal(dailyScore)||!listIsLegal(theoryScore)||!listIsLegal(labScore)){
		layer.msg("某处成绩设置错误！请填写0~100的数值");
	}else{
		for(var i=0;i<taskScore.length;i++){
			
			var item={
				id:csId[i].value,
				theoryTestGrade:theoryScore[i].value,
				labTestGrade:labScore[i].value,
				dailyGrade:dailyScore[i].value,
				taskTotalGrade:taskScore[i].value
			};
			items.push(item);
		}
		
		if(items.length<=0){
			alert("请编辑成绩");
		}
		
		var json={
			courseId:data.data.courseId,
			list:items
		};
		
		$.post(CONTEXT_PATH+"gradeView/batchUpdateGrade", {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				window.location.reload();
			}else{
				alert(data.message);
			}
		});
	}
};

var taskScoreLog = function(index){
	var json={
			uid:dataNow.data.list[index].stuId,
			roleType:"STUDENT",
			courseId:CourseId
	};
	getTaskScore(json,index);
}

var getTaskScore = function(json,index){
	
	$.post(CONTEXT_PATH+"taskGradeListView/ajaxTListData", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			initTaskScoreLog(data.data.list,index);
		}else{
			alert(data.message);
		}
	});
}

var getTaskType = function(type){
	if(type=="ASKINLESSON"){
		return "课堂提问";
	}else if(type=="TESTINLESSON"){
		return "当堂测试";
	}else if(type=="HOMEWORK"){
		 return "课后作业";
	}else if(type=="LABTEST"){
		return "实验任务";
	}else{
		return "个人任务";
	}
}

var initTaskScoreLog = function(list,index){
	var taskList=$("#task-list"+index);
	taskList.empty();
	if(list.length <= 0){
		var s="<tr><td colspan=\"4\">暂无任务成绩记录</td></tr>";
		taskList.append(s);
	}else{
		for(var i=0;i<list.length;i++){
			var item=list[i];
			var s="<tr>";
			s+="<td title=\""+getTaskType(item.type)+"\">"+getTaskType(item.type)+"</td>";
			s+="<td title=\""+item.title+"\">"+item.title+"</td>";
			s+="<td title=\""+item.scoreDate+"\">"+item.scoreDate+"</td>";
			s+="<td title=\""+item.score+"\">"+item.score+"</td>";
			s+="</tr>";
			taskList.append(s);
		}
	}	
}

var searchTaskScoreLog = function(index){
	/* 获取的stuId不正确，查询获取的数据不对 */
	var stuId = dataNow.data.list[index].stuId;
	var json={
			uid:stuId,
			roleType:"STUDENT",
			courseId:CourseId
	};	
	var  type=$("#searchTaskByType"+index+"  option:selected").val();
	if(type != "ALL"){
		json.type=type;
	}
	getTaskScore(json,index);
}

var isEmpty=function(s){
	if(s==null||s=="" || s==undefined){
		return true;
	}
	return false;
};
var buildExcel = function(){
	var classId = $("#selectClassList option:selected").val();
	if(isEmpty(classId)){
		alert("请选择班级");
		return;
	}
	window.location.href=CONTEXT_PATH+"studentGradeView/genGradeExcel?classId="+classId;
}
</script>
<script src="<c:url value='/js/courseScore.js'/>" type="text/javascript" charset="utf-8"></script>
</html>